<div id="box">
    <!-- <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul> -->
</div>
<style>
    .active{
        background-color: pink;
    }
</style>
<script>

    // 普通字符串不能折行
    // box.innerHTML="<ul>
    //                 <li>1</li>
    //                 <li>2</li>
    //                 <li>3</li>
    //             </ul>"


    // 模板字符串可以随意折行
    // box.innerHTML = `<ul>
    //                 <li>1</li>
    //                 <li>2</li>
    //                 <li>3</li>
    //             </ul>`


    let arr=[1,2,3]
    // box.innerHTML = "<ul>"+
    //                     "<li>"+arr[0]+"</li>"+
    //                     "<li>"+arr[1]+"</li>"+
    //                     "<li>"+arr[2]+"</li>"+
    //                 "</ul>"


    // 表达式渲染：  ${表达式 }
    // box.innerHTML = `<ul>
    //                     <li>${arr[0]}</li>
    //                     <li>${arr[1]}</li>
    //                     <li>${arr[2]}</li>
    //                 </ul>`





    // box.innerHTML = "<ul>"+
    //                     "<li>"+arr[0]+"</li>"+
    //                     "<li class='active'>"+arr[1]+"</li>"+
    //                     "<li>"+arr[2]+"</li>"+
    //                 "</ul>"



    //模板字符串不用考虑单双引号的嵌套问题
    box.innerHTML = `<ul>
                        <li class='active'>${arr[0]}</li>
                        <li class="active">${arr[1]}</li>
                        <li>${arr[2]}</li>
                    </ul>`


</script>